<template>
  <el-card class="box-card">
    <div class="mgmt-user">
      <div class="operate">
        <el-button type="primary" @click="openModel(1)">新建</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%" default-expand-all row-key="id">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="name" label="名称" width="200" />
        <el-table-column prop="depict" label="分类描述" />
        <el-table-column prop="icon" label="图标" #default="scope">
          <img :src="scope.row.icon" alt="" width="40" />
        </el-table-column>
        <el-table-column prop="url" label="地址" />
        <el-table-column prop="create_time" label="创建时间" #default="scope">
          <span>{{ formatData(scope.row.create_time) }}</span>
        </el-table-column>
        <el-table-column label="操作" #default="scope" width="200">
          <el-button size="small" type="danger" plain @click="delCard(scope.row)">删除</el-button>
          <el-button size="small" type="primary" plain @click="openModel(2, scope.row)" v-show="scope.row.pid == 0"
            >添加子类</el-button
          >
        </el-table-column>
      </el-table>
    </div>
  </el-card>
  <el-dialog v-model="dialogVisible" :title="modelTitle" width="30%" :close-on-click-modal="false">
    <div class="userForm" v-if="isType">
      <el-form :model="form" label-width="120px" label-position="top" ref="ruleFormRef" :rules="rules">
        <el-form-item prop="name">
          <el-input v-model="form.name" placeholder="请输入卡片名称" />
        </el-form-item>
        <el-form-item prop="desc">
          <el-input v-model="form.desc" placeholder="请输入卡片描述" />
        </el-form-item>
        <el-form-item prop="icon">
          <el-input v-model="form.icon" placeholder="请输入图标地址" />
        </el-form-item>
        <el-form-item prop="url">
          <el-input v-model="form.url" placeholder="请输入地址" />
        </el-form-item>
      </el-form>
    </div>
    <div class="category" v-else>
      <el-form :model="categoryForm" label-width="120px" label-position="top" ref="categoryRef" :rules="categoryRules">
        <el-form-item prop="name">
          <el-input v-model="categoryForm.name" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item prop="desc">
          <el-input v-model="categoryForm.desc" placeholder="请输入描述" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { getCardApi, addCardApi, delCardApi } from '@/api/mgmtCard' //api/后面不能大写Mgmt
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs' // ES 2015
import { listToTree } from '@/utils/index.js'
const tableData = ref([])
const initData = async () => {
  const res = await getCardApi()
  if (res.code === 200) {
    tableData.value = res.data.reverse()
    let aa = listToTree(res.data.reverse())
    tableData.value = aa
  }
}
//删除分类
const delCard = (row) => {
  ElMessageBox.confirm('确认删除', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    let res = await delCardApi({ cardId: row.id })
    if (res.code == 200) {
      ElMessage({ message: '删除成功', type: 'success' })
      initData()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const dialogVisible = ref(false)
const modelTitle = ref('')
const isType = ref(false)
let current = reactive({ pid: '' })
//添加一级分类
const categoryForm = reactive({ name: '', desc: '' })
const categoryRules = reactive({
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  desc: [{ required: true, message: '请输入描述', trigger: 'blur' }]
})
const categoryRef = ref(null)
//添加二级
const form = reactive({
  name: '',
  desc: '',
  icon: '',
  url: ''
})
const rules = reactive({
  name: [{ required: true, message: '请输入卡片名称', trigger: 'blur' }],
  desc: [{ required: true, message: '请输入卡片描述', trigger: 'blur' }],
  icon: [{ required: true, message: '请输入图标地址', trigger: 'blur' }],
  url: [{ required: true, message: '请输入链接地址', trigger: 'blur' }]
})
const ruleFormRef = ref(null)

/**
 * type:1 添加一级分类
 * type:2 添加二级分类
 * type:3 编辑一级分类
 * type:4 编辑二级分类
 * **/
const openModel = (type, value) => {
  dialogVisible.value = true
  current.pid = value ? value.id : ''
  if (type === 1) {
    isType.value = false
    modelTitle.value = '添加分类'
  }
  if (type === 2) {
    isType.value = true
    modelTitle.value = '添加子分类'
  }
  if (type === 3) {
    modelTitle.value = '编辑分类'
    isType.value = false
  }
  if (type === 4) {
    modelTitle.value = '编辑子分类'
    isType.value = true
  }
}
const submit = () => {
  if (isType.value) {
    //添加2级分类
    ruleFormRef.value.validate(async (valid) => {
      if (valid) {
        let forms = { ...form, ...current }
        addCardApi(forms).then((res) => {
          if (res.code == 200) {
            ruleFormRef.value.resetFields()
            dialogVisible.value = false
            ElMessage({ message: '添加成功', type: 'success' })
            initData()
          } else {
            ElMessage.error(res.msg)
          }
        })
      }
    })
  } else {
    //添加一级分类
    categoryRef.value.validate(async (valid) => {
      if (valid) {
        categoryForm.pid = 0
        addCardApi(categoryForm).then((res) => {
          if (res.code == 200) {
            categoryRef.value.resetFields()
            dialogVisible.value = false
            ElMessage({ message: '添加一级分类成功', type: 'success' })
            initData()
          } else {
            ElMessage.error(res.msg)
          }
        })
      }
    })
  }
}
onMounted(() => {
  initData()
})
const formatData = (time) => {
  let times = Number(time)
  return dayjs(times).format('YYYY-MM-DD HH:mm:ss')
}
</script>
<style lang="scss" scoped>
.mgmt-user {
  .operate {
    margin: 20px 0;
    display: flex;
    .input {
      width: 250px;
      margin-right: 20px;
    }
  }
}

.userForm {
  .el-select {
    width: 100%;
  }
}
</style>
